<template>
  <div class="bar-echart">
    <echarts :options="options"></echarts>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";

import * as echartsInit from "echarts";

import echarts from "@/base-ui/echarts/index";

export default defineComponent({
  components: {
    echarts,
  },
  props: {
    goodsFavor: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    const options = computed(() => {
      return {
        xAxis: {
          data: props.goodsFavor.xLabels,
          axisLabel: {
            inside: true,
            color: "#fff",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#999",
          },
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            type: "bar",
            showBackground: true,
            itemStyle: {
              color: new echartsInit.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new echartsInit.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
              },
            },
            data: props.goodsFavor.values,
          },
        ],
      };
    });

    return {
      options,
    };
  },
});
</script>

<style lang="less" scoped></style>